<template>
  <div class="boos">
    <div class="top">
        <p class="p1">您好，</p>
        <p>欢迎登录华硕商城</p>
    </div>

    <div class="center">
       <div class="box">
            <div class="left">
                <van-icon name="friends-o"  class="icon1"/>
                <input type="text" placeholder="输入用户名" v-model="urname">
            </div>
            <div class="left">
                <van-icon name="shield-o"  class="icon1" />
                <input type="password" placeholder="请输入密码" v-model="password">
            </div>
            <button class="button1" @click="fun3">立即登录</button>
            <button class="button2" @click="fun2()">立即注册</button>
            <p class="poe" @click="fun1">我先逛逛</p>
       </div>
    </div>

  </div>
</template>

<script>
export default {
    data() {
        return {
            urname: "",
            password: "",
            arr1: [],
            arr2:[]
        }
    },
    methods: {
        fun1() {
            this.$router.push("/home")
        },
        fun2() {
            this.$emit("zhuce",1)
        },
        fun3() {
            this.$http({
                url:"http://localhost:3000/denglu"
            }).then(res => {
                res.data.forEach((item,index,arr) => {
                   this.arr1.push(item.urname)
                   this.arr2.push(item.password)
                });
                let x = this.arr1.indexOf(this.urname)
                let y = this.arr2.indexOf(this.password)
                if (x == y && x >= 0) {
                    this.$router.push({
                        path: "/home",
                        query: {
                            name:this.urname
                        }
                    })
                } else {
                    alert("账号或密码错误")
                }

            })

        }
    }

}
</script>

<style lang="scss" scoped>
.boos{
    position: relative;
    .center{
        width: 100vw;
        height: 137vw;
        background-color: white;
        position: absolute;
        top: 40vw;
        border-radius: 10vw 10vw  0 0;
        .box{
            width: 80vw;
            height: 100vw;
            margin: auto;
            margin-top: 12vw;
            .poe{
                position: absolute;
                bottom: 45vw;
                left: 40vw;
                color: rgb(1, 243, 203);
            }
            .button2{
                width: 20vw;
                height: 8vw;
                font-size: 3vw;
                color: white;
                background-color: #1e7dff;
                margin-top: 3vw;
                float: right;
                margin-right: 4vw;
                border-style: none;
                border-radius: 2vw;
            }
            .button1{
                width: 80vw;
                height: 12vw;
                margin-top: 8vw;
                color: white;
                background-color: #1e7dff;
                border-style: none;
                border-radius: 3vw;
            }
            .left{
                width: 80vw;
                background-color: beige;
                display: flex;
                align-items: center;
                justify-content: space-around;
                background-color: #f2f3f7;
                margin-top: 5vw;
                border-radius: 2vw;
                .icon1{
                    font-size: 8vw;
                }
                input{
                    width: 60vw;
                    height: 12vw;
                    background-color: #f2f3f7;
                    border-style: none;
                }
            }
        }
    }
    .top{
        width: 100vw;
        height:70vw;
        background: url("https://static.asus.com.cn/static/wap/images/bg.png");
        overflow: hidden;
        p{
            text-indent: 10vw;
            color: white;
            font-size: 8vw;
        }
        .p1{
            margin-top: 14vw;
        }
    }
}


</style>